<template>
    <div>
        <Head></Head>
         <main>
           <el-form  ref="form" :hide-required-asterisk="bool" :model="form" label-width="80px">
            <el-form-item :required="bool" label="食品名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item :required="bool" label="食品种类">
              <el-input v-model="form.classfy" placeholder="请输入食品种类"></el-input>
            </el-form-item>
            <el-form-item label="种类描述">
              <el-input v-model="form.jieshao" placeholder="请输入种类描述"></el-input>
            </el-form-item>
            <el-form-item :required="bool" label="食品详情">
              <el-input v-model="form.xiangQ" placeholder="请输入食品详情"></el-input>
            </el-form-item>
            
            
            <el-form-item label="食物图片">
            <el-upload
            class="avatar-uploader"
            action="/myE/addShop/add_img"
            list-type="picture-card"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

            </el-form-item>
            
            <el-form-item label="食品特点">
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="新品" name="type"></el-checkbox>
                <el-checkbox label="招牌" name="type"></el-checkbox>
                
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="包装费">
              <el-input-number v-model="form.baoMoney" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
            </el-form-item>
            <el-form-item label="价格">
              <el-input-number v-model="form.price" controls-position="right" @change="handleChange1" :min="1" :max="50"></el-input-number>
            </el-form-item>
            
            

            <el-form-item>
              <el-button type="primary" @click="onSubmit">确认添加食品</el-button>
            
            </el-form-item>
          </el-form>
       </main>
    </div>
</template>

<script>
import Head from '../components/head'
import {ajax_addFood} from '../ajax/index'
export default {
    name: '',
    components:{
        Head
    },
     data(){
     return{
        form: {
          name: '',
          classfy:'',
          jieshao:'',
          xiangQ:'',
          baoMoney:2,
          price:12,
          type: [],  
          img_url:''
        
        },
         
       
        bool:false,
        imageUrl: '',
 
      
     }
    },
    methods:{
         onSubmit() {
        // console.log('submit!',8);
        // return new Promise(resolve=>{
         
              ajax_addFood({
             name:this.form.name,
             food_lei:this.form.classfy,
             jshao:this.form.jieshao,
             xiangQ:this.form.xiangQ,
             baoMoney:this.form.baoMoney,
             price:this.form.price,
             tedian:JSON.stringify(this.form.type),
             food_img:this.form.img_url,
             shop_Id:this.$route.query.Id,
         }).then(res=>{
          //  alert(res.message)
           if(res.code==0){
             this.$message.error(res.message)
           }else if(res.code==1){
             this.$message.success(res.message)
           }
        
          //  resolve(this.form.name)
         })
         
            
        // })
       
      },
       handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.form.img_url=file.name
        console.log(res.data)
        // this.$refs.upload.clearFiles()
  
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
       handleChange(value) {
        console.log(value);
      },
      handleChange1(value) {
        console.log(value);
      }
   
    },
    beforeCreate(){
        
    },
    created(){
        // if(!this.$route.query.Id){
        //     var obj={
        //         home:"首页",
        //         name:"数据管理",
        //         title:"商家列表"
        //     }
        //     this.$store.commit("setCan",obj)
        //     alert("请选择商铺")
        //      this.$router.push("/shopList")
        // }
        // console.log(this.$route.query.obj);
        // this.can1=JSON.parse(this.$route.query.obj);
        // console.log(this)
    }
}
</script>

<style scoped>
main{
    width: 45%;
    height: 600px;
    overflow: auto;
    margin-left: 200px;
    margin-top: 40px;
    scrollbar-width:none;
}

/* main::-moz-scrollbar{
  width: 0 !important;
} */
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    /* width: px;
    height: px;
    line-height: 178px; */
    text-align: center;
  }
  .avatar {
    width: 100%;
    height: 100%;
    display: block;
  }
</style>